import React, { useState, useEffect } from 'react'
import styles from '../../styles/home/message.scss'
import { getToken, handleCourse, handleTimeStamp } from '../common/util'
import { axiosConfig, backIP, error } from '../common/config'
import axios from 'axios'
import DetailMessage from './DetailMessage'

export default function Message() {
    const [messageInfo, setMessageInfo] = useState(null)
    const [visible, setVisible] = useState(false); // 对话框的开关
    const [detailInfo, setDetailInfo] = useState(null)

    const handleMessageInfo = async (token: string) => {
        const { data: res }: { data: axiosConfig } = await axios({
            url: `${backIP}/info`,
            data: {},
            method: 'get',
            headers: { Authorization: token }
        })
        if (res.code === 0) {
            setMessageInfo(res.data)
        } else {
            error(res.message)
        }
    }
    const handleStatusColor = (status: string) => {
        const contrast = {
            '正在审核': 'yellow',
            '审核成功': 'green',
            '审核失败': 'red'
        }
        return contrast[status]
    }
    const handleLookDetailInfo = async (info_id: number) => {
        const token: string = getToken();
        const { data: res }: { data: axiosConfig } = await axios({
            url: `${backIP}/detailInfo`,
            params: {
                info_id
            },
            method: 'get',
            headers: { Authorization: token }
        })
        if (res.code === 0) {
            setVisible(true)
            setDetailInfo(res.data)
        } else {
            error(res.message)
        }
    }

    useEffect(() => {
        const token: string = getToken();
        handleMessageInfo(token);
    }, [])

    return (
        <div className={styles.layout}>
            {
                messageInfo
                    ? <div className={styles.main}>
                        {
                            messageInfo.map((item, index) => {
                                return <div
                                    key={index}
                                    className={styles.card}
                                    onClick={() => { handleLookDetailInfo(item.info_id) }}
                                >
                                    <p className={styles.title}>{item.class_name}</p>
                                    <p className={styles.content}>{handleCourse(item.course)}</p>
                                    <p className={styles.content}>申请时间：{item.borrow_year}-{item.borrow_month}-{item.borrow_day}</p>
                                    <p className={styles.content}>预约时间：{handleTimeStamp(item.class_time)}</p>
                                    <p className={styles.status} style={{
                                        color: handleStatusColor(item.status)
                                    }}>{item.status}</p>
                                </div>
                            })
                        }
                    </div>
                    : <div>没有消息</div>
            }
            <DetailMessage visible={visible} setVisible={setVisible} detailInfo={detailInfo}/>
        </div>
    )
}
